<template>
	<view class="top-nav">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 导航栏内容 -->
		<view class="nav-content">
			<!-- 左侧菜单 -->
			<view class="nav-left">
				<view class="menu-icon" @click="handleMenuClick">
					<uni-icons type="list" :size="20" color="#fff"></uni-icons>
				</view>
			</view>
			
			<!-- 中间标签栏 -->
			<scroll-view class="nav-tabs" scroll-x="true" :show-scrollbar="false">
				<view 
					class="tab-item" 
					:class="{ active: activeTab === item.key }"
					v-for="item in tabs" 
					:key="item.key"
					@click="handleTabClick(item.key)"
				>
					{{ item.label }}
				</view>
			</scroll-view>
			
			<!-- 右侧搜索 -->
            <view class="nav-right">
                <view class="search-icon" @click="handleSearchClick">
                    <uni-icons type="search" :size="24" color="#fff"></uni-icons>
                </view>
            </view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
	activeTab: {
		type: String,
		default: 'recommend'
	}
})

const emit = defineEmits(['tabChange', 'menuClick', 'searchClick'])

const tabs = ref([
	{ key: 'follow', label: '关注' },
	{ key: 'recommend', label: '推荐' },
	{ key: 'city', label: '成都' },
	{ key: 'longVideo', label: '长视频' },
	{ key: 'mall', label: '商城' },
	{ key: 'hot', label: '热点' }
])

const handleTabClick = (key) => {
	emit('tabChange', key)
}

const handleMenuClick = () => {
	emit('menuClick')
}

const handleSearchClick = () => {
	emit('searchClick')
}
</script>

<style scoped lang="scss">
.top-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.0));
}

.status-bar {
	height: var(--status-bar-height, 44rpx);
	background: transparent;
}

.nav-content {
	display: flex;
	align-items: center;
	height: 88rpx;
	padding: 0 20rpx;
}

.nav-left {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}

.menu-icon {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-tabs {
	flex: 1;
	white-space: nowrap;
}

.tab-item {
	display: inline-block;
	padding: 0 24rpx;
	height: 88rpx;
	line-height: 88rpx;
	color: rgba(255, 255, 255, 0.7);
	font-size: 28rpx;
	position: relative;
	
	&.active {
		color: #fff;
		font-weight: 500;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 24rpx;
			right: 24rpx;
			height: 4rpx;
			background: #fff;
			border-radius: 2rpx;
		}
	}
}

.nav-right {
	display: flex;
	align-items: center;
	margin-left: 20rpx;
}

.search-icon {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>

